
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <!-- <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台><router-link to="/message">消息通知</router-link></div>
          --><div class="hei10"></div>
                <div class="mesquanxuan">
					<div class="piliang"><el-button type="danger"  @click="dispose" >批量处理</el-button></div>
				</div>
				<div class="team">
					<div class="powertop">
						<router-link class="powertopli " to="/message">订单变更({{nodonum1}})</router-link>
						<router-link class="powertopli powertopact" to="/message/messageerror">异常处理({{nodonum2}})</router-link>
						<router-link class="powertopli" to="/message/messagedanger">预警({{nodonum3}})</router-link>
					</div>
				</div>

                <div class="cons" v-loading="loading">
					<div class="list">
						<div class="td"><input type="checkbox" @change="quanxuan" value="0" v-model="quanxuana" />全选</div>
                    	<div class="td">消息</div>
                        <div class="td">时间</div>
                    	<div class="td">操作</div>
					</div>
                    <div class="list" v-for="item in list" :key="item.id" v-bind:class="[item.status == 1 ? 'act' : 'no']">

				  		<div class="td"><input type="checkbox" :value="item.id" @change="danxuan" v-model="danxuans" /></div>
                    	<div class="td"><i class="el-icon-message-solid"></i>{{item.content}}</div>
                        <div class="td">{{item.created_at}}</div>
                    	<div class="td">
                            <span class="chuli" v-if="item.status == 1?true:false">处理中...</span>
                            <el-button type="primary" size="mini" @click="status(item.id)" v-if="item.status == 1?true:false">处理完成</el-button>
                            <div class="td"  v-if="item.status == 1?false:true" style="color: #229453;">已处理</div>
                        </div>
                    </div>
                    <el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="fanye" :page-size="pagesize" :total="total"></el-pagination>
                </div>
			</div>
		</div>
		<!-- <foot></foot> -->
	</div>
</template>

<script>
	import axios from "axios";
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
	export default{
		components: {
			"left": left,
			"top": top,
			'foot': foot
		},
		name: 'messageerror',
		data(){
			return{
				list:{

                },
                total:0,
                pagesize:20,
                page:1,
				loading:true,
				nodonum1:"",
				nodonum2:"",
				nodonum3:"",

				danxuans: [],
				quanxuana: false,
				quanxuans: [],
			}
		},
		created() {
			this.getlist()

			//单纯获取数字用
			axios.get('/api/system/message/list?page='+this.page+'&page_size='+this.pagesize+'&class=1')
				.then(response => {
					if(response.data.msg.code == 0){
						this.nodonum1 = response.data.data.undealed_count
					}else{
						this.$message.error(response.data.msg.info);
					}
				})
			//单纯获取数字用
			axios.get('/api/system/message/list?page='+this.page+'&page_size='+this.pagesize+'&class=3')
				.then(response => {
					if(response.data.msg.code == 0){
						this.nodonum3 = response.data.data.undealed_count
					}else{
						this.$message.error(response.data.msg.info);
					}
				})
		},
        methods:{
			//全选的ids集合
			ids: function() {
				var checkids = [];
				for (var i in this.list) {
					checkids.push(this.list[i].id);
				}
				this.quanxuans = checkids;
			},
			//点击全选
			quanxuan: function() {
				if (
					this.danxuans.length != this.quanxuans.length ||
					this.danxuans.length == 0
				) {
					this.danxuans = this.quanxuans;
					this.quanxuana = true;
				} else {
					this.danxuans = [];
					this.quanxuana = false;
				}
			},
			//点击单选
			danxuan: function() {
				// this.choosearea.push(this.checkedarea)
				if (this.danxuans.length == this.quanxuans.length) {
					this.quanxuana = true;
				} else {
					this.quanxuana = false;
				}
			},
			//批量处理
			dispose: function() {
				const that = this
				if(this.danxuans == ""){
					this.$message.error("请选择要处理的订单");
					return false
				}
				var arr = "";
				for (var i in this.danxuans) {
					arr = arr + this.danxuans[i] + ",";
				}
				arr = arr.substring(0, arr.lastIndexOf(","));
				axios.post("/api/system/message/status",{status:2,id:arr}).then(response => {
					if(response.data.msg.code == 0) {
					that.$message({
							message: `处理成功${response.data.data}条`,
							type: "success"
						});
					that.loading = true;
					that.getlist();
					}
				})
			},
            getlist:function(){
				this.danxuans = [];
				this.quanxuana = false
                axios.get('/api/system/message/list?page='+this.page+'&page_size='+this.pagesize+'&class=2')
                	.then(response => {
                		if(response.data.msg.code == 0){
                			this.list = response.data.data.data
							this.total = response.data.data.total
							this.nodonum2 = response.data.data.undealed_count
							this.ids()
							this.loading = false
                		}else{
                			this.$message.error(response.data.msg.info);
                		}
                	})
            },
            //翻页
            fanye:function(page){
            	this.loading = true
            	this.page = page
            	this.getlist()
            },
            status:function(id){
                var that = this
                axios.post('/api/system/message/status',{status:2,id:id})
                	.then(response => {
                		if(response.data.msg.code == 0){
                			that.$message({
                			    message: '修改状态成功！',
                			    type: 'success'
                			});
                            that.getlist()
                		}else{
                			that.$message.error(response.data.msg.info);
                		}
                	})
            }
        }
	}
</script>

<style lang="scss" scoped>
	.index{

		.team{ background: #F9F9F9;}
        .powertop{ display: flex; width: 640px; }
        .powertopli{ flex-basis: 160px; line-height: 45px; border-top: 4px #F9F9F9 solid; color: #727272; border-right: 1px #F9F9F9 solid; font-size: 14px; text-align: center;}
        .powertopact{ background: #FFFFFF; border-top: 4px #DD2727 solid;}
		.piliang{ }
		.piliangxuan{ padding: 3px 0;}
		.mesquanxuan{ padding: 10px 30px 20px 0px; display: flex; font-size: 14px;background: #f4f4f4}
        .cons{
            border: 1px #EAEAEA solid; margin: 20px;
            .list{
            	display: flex; color: #727272; line-height: 45px; margin: 0 20px; border-bottom: 1px #EAEAEA solid; margin-top: -1px;
            	.td{ font-size: 14px;
                    .chuli{ padding: 0 10px;}
                }
				.td:nth-child(1) {
				  flex: 1;
				}

				.td:nth-child(2) {
				  flex: 6;
				}

				.td:nth-child(3) {
				  flex: 1.2; padding-left: 20px;
				}

				.td:nth-child(4) {
				  flex: 1;
				  text-align: right;
				}
            }
            .el-pagination{ text-align: right; margin: 20px 0}
            .act{
                color: #000;
                .el-icon-message-solid{ color: #EEF7FF}
            }
            .no{ color: #999;}
        }

	}
</style>
